import React, { Component } from 'react';
import {
  StyleSheet, View, Text, FlatList, Dimensions, TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';

const VIEW_WIDTH = Dimensions.get('window').width - 16;
const ITEM_WIDTH = (VIEW_WIDTH) / 7.0;

class WeeklyDate extends Component {
    static propTypes = {
      selectedDate: PropTypes.string,
      weekDayList: PropTypes.array,
      onDaySelected: PropTypes.func, // this.props.onDayChange(day.clone());
    };

    constructor(props) {
      super(props);
      this.state = {
        // initalIdx: 0, //初始定位idx
        // refFlatList: null,//ref
      };
    }

    renderRow({ item, index }) {
      // console.log('weekLyDay renderRow item:', item);
      const isSelected = item.date === this.props.selectedDate;
      return (
        <TouchableOpacity onPress={() => this.props.onDaySelected(item, index)}>
          <View style={styles.weekDay} key={item.date}>
            <View style={styles.weekDayView}>
              <Text style={styles.day}>{item.day}</Text>
            </View>
            <View style={[styles.dayGsView, isSelected && styles.dayGsViewSelected]}>
              <Text style={[styles.time, isSelected && styles.selectedTime]}>{item.time}</Text>
              <Text style={[styles.gs, isSelected && styles.selectedTime]}>
                {Number(item.gsTotalHour || 0)}
                工时
              </Text>
            </View>
            <View style={styles.dotView}>
              <View style={styles.dot} />
            </View>
          </View>
        </TouchableOpacity>
      );
    }

    getItemLayout = (data, index) => (
      { length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index }
    );

    render() {
      return (
        <View style={styles.container}>
          <FlatList
            // ref={el => this.setState({refFlatList:el})}
            showsHorizontalScrollIndicator={false}
            extraData={this.state}
            horizontal
            data={this.props.weekDayList || []}
            getItemLayout={this.getItemLayout}
            // initialNumToRender={7}
            inverted
            // initialScrollIndex={this.state.initalIdx}
            renderItem={this.renderRow.bind(this)}
            keyExtractor={(item) => item.date}
            ListEmptyComponent={() => <View style={styles.emptyView}><Text>暂无数据...</Text></View>}
          />
        </View>
      );
    }
}
const styles = StyleSheet.create({
  container: {
    marginLeft: 8,
    marginRight: 8,
    marginTop: 4,
    height: 71 + ITEM_WIDTH,
    borderRadius: 8,
    backgroundColor: 'white',
    borderColor: '#ECEDEE',
    borderWidth: StyleSheet.hairlineWidth,
  },
  weekDay: {
    paddingTop: 11,
    width: ITEM_WIDTH,
    display: 'flex',
  },
  weekDayView: {
    paddingBottom: 10,
    width: ITEM_WIDTH,
    borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  day: { // 星期几
    textAlign: 'center',
    color: '#4A4A4A',
    height: 17,
    fontSize: 12,
  },
  emptyView: {
    width: VIEW_WIDTH,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transform: [{ scaleX: -1 }],
  },
  dayGsView: {
    marginTop: 8,
    width: ITEM_WIDTH,
    height: ITEM_WIDTH,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  dayGsViewSelected: {
    backgroundColor: '#3385FF',
    borderRadius: ITEM_WIDTH,
  },
  selectedTime: {
    color: 'white',
  },
  time: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#4889DB',
  },
  gs: {
    fontWeight: 'bold',
    fontSize: 8,
    color: '#C0C8D3',
  },
  dotView: {
    paddingTop: 4,
    paddingBottom: 15,
    display: 'flex',
    alignItems: 'center',
  },
  dot: {
    width: 4,
    height: 4,
    borderRadius: 4,
    backgroundColor: '#3295F9',
  },
});
export default WeeklyDate;
